<h1><%= @post.title %></h1>
<p><%= @post.content %></p>
<h3>Click on a product to remove it from this post. <%= link_to "Click here", "/users/show/#{current_user.login}"%> when you're finished.</h3>
<br />
<div id="post_products">
    <% for product in @post.products %>
        <div class="post_thumb" id="post_product_<%= product.id %>" style="background: url(<%= product.image %>) center;"></div>
    <% end %>
</div>
<div class="clear"></div>
<hr />
<h3>Click on a product to add it to this post.</h3>
<br />
<div id="products">
    <% for product in @products %>
        <div class="product_thumb" id="product_<%= product.id %>" style="background: url(<%= product.image %>) center;"></div>
    <% end %>
</div>
<div class="clear"></div>

<%= javascript_include_tag "lowpro.js" %>

<script type="text/javascript">
    var post_product_thumb = new Template("<div class='post_thumb' id='post_#{id}' style='#{style}'></div>");
    
    Event.addBehavior({
        '.product_thumb:click' : function(ev) {
            e = Event.element(ev);
            new Ajax.Request('/posts/add_product/', {
                method: 'post',
                parameters: {
                    post_id: <%= @post.id %>,
                    product_id: e.readAttribute("id").gsub("product_", "")
                },
                onSuccess: function(transport) {
                    $("post_products").insert(post_product_thumb.evaluate({
                        id: e.readAttribute("id"),
                        style: e.readAttribute("style")
                    }));
                }
            })
        },
        '.post_thumb:click' : function(ev) {
            e = Event.element(ev);
            new Ajax.Request('/posts/remove_product/', {
                method: 'post',
                parameters: {
                    post_id: <%= @post.id %>,
                    product_id: e.readAttribute("id").gsub("post_product_", "")
                },
                onSuccess: function(transport) {
                    e.remove();
                }
            })
        }
    });
</script>